<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 100px;
        }

        textarea{
        resize: none;
        }
        li{
            width: 300px;
            background-color: pink;
            list-style: none;
            margin-top: 20px;
        } 
        li a{
            float: right;
            text-decoration: none;
        }    
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="5"></textarea>
    <button class="btn1">发布</button>
    <button class="btn2">删除</button>
    <ul>

    </ul>
    <script>
        var textarea = document.querySelector("textarea");
        var btn1 = document.querySelector(".btn1");
        var ul = document.querySelector("ul");
        var btn2 = document.querySelector(".btn2")
        
        btn1.onclick = function(){
            if(textarea.value == ""){
                alert("您没有输入内容！");
            }else{
                //创建元素
            var li = document.createElement("li");
            li.innerHTML = textarea.value + "<a href='javascript:;'>删除</a>";
            // ul.appendChild(li);  在后面插入
            //添加元素
            ul.insertBefore(li,ul.children[0]);
            //删除元素
            var as = document.querySelectorAll("a");
            for(var i = 0;i < as.length;i++){
                as[i].onclick = function(){
                   ul.removeChild(this.parentNode);
                }
            }
            }   
        }
         btn2.onclick = function(){
             if(ul.children.length == 0){
                 this.disabled = true;
             }else{
                ul.removeChild(ul.children[0]);
             }

         }
    </script>
</body>
</html>